/*
 * @Author: actor
 * @Date: 2023-11-13 15:43:57
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:11:06
 * @FilePath: \i-hos-app\shared\emr\src\hooks\useChangeConfig.ts
 * @Description: 修改设置配置
 */
// 接口约束
import { IConfig } from '../interface/page'
import { IPageConfigStore } from '../interface/page'

// store数据
import { usePageConfigStore } from '../store/pageConfig'
// 获取公共的hooks
import { useCommon } from '../hooks/useCommon'
// 公共方法

// 创建元素
import { useCreateHtml } from '../hooks/useCreateHtml'

export const changeConfig = (flag: IConfig): any => {
  // 获取设置属性
  const { findParents } = useCommon()
  // 解构 store的配置数据
  const configStore: IPageConfigStore = usePageConfigStore()
  // 获取设置属性
  const { createCheckedHtml } = useCreateHtml()

  // 当前元素的配置属性
  let _config = JSON.parse(JSON.stringify(flag as IConfig))

  //  修改配置仓库
  configStore.$patch?.((state: IPageConfigStore) => {
    // 修改当前的元素
    let _curEl = document.getElementById(`${state.el}`) as HTMLElement
    if (_curEl == null) return

    // 设置对应的值
    // 基本设置配置
    _curEl.dataset.config = JSON.stringify(_config)
    if (!!_config.textVal && _config.type != '复选框' && _config.type != '单选框') {
      _curEl.innerText = _config.textVal
    }
    // 设置项的配置
    !!_config.multi ? _curEl.setAttribute('multi', _config.multi) : _curEl.removeAttribute('multi')
    !!_config.validate ? _curEl.setAttribute('validate', _config.validate) : _curEl.removeAttribute('validate')
    !!_config.des ? _curEl.setAttribute('title', _config.des) : _curEl.removeAttribute('title')
    // _curEl.setAttribute('contenteditable', _config.edit != undefined ? _config.edit : false)
    _curEl.setAttribute('contenteditable', _config.edit != undefined ? _config.edit : '')

    // 样式的配置
    if (_config.array == 2) {
      _curEl.style.display = 'inline-flex'
      _curEl.style.flexDirection = 'column'
    }
    if (!!_config.alignment) _curEl.style.textAlign = _config.alignment
    if (!!_config.minWidth) _curEl.style.minWidth = _config.minWidth + 'mm'
    if (!!_config.bgColor) _curEl.style.background = _config.bgColor

    // 设置配置数据
    let _area = findParents(_curEl, { id: 'emr_page_' })
    if (!!_area[0].id) {
      let obj: any = {}
      switch (_area[0].id) {
        case 'emr_page_head':
          obj = state.json?.HEADER
          break
        case 'emr_page_body':
          obj = state.json?.BODY
          break
        case 'emr_page_footer':
          obj = state.json?.FOOTER
          break
      }
      Object.keys(obj).map((key: string) => {
        if (key == _curEl.id) {
          delete obj[_curEl.id]
        }
      })
      if (!!_config.name) obj[_config.name] = !!_config.textVal ? _config.textVal : !!_curEl.innerText ? _curEl.innerText : ''
      Object.keys(obj).sort()
    }
    console.log(333, _config.name)
    // 修改元素的id
    _curEl.id = !!_config.name ? _config.name : _curEl.id

    // 修改仓库
    state.val = _config
    state.commonComponentActive = ''
    // state.el = !!_config.name ? _config.name : _curEl.id
    state.el = !!_curEl.id ? _curEl.id : ''

    // 更换html元素
    if (_config.type == '复选框' || _config.type == '单选框') {
      createCheckedHtml(_curEl.id)
    }
  })
}
